<!--
  功能：首页
  作者：guolei
  邮箱：guolei@briup.com
  时间：2021年07月14日 00:31:16
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="home">
  <el-carousel :interval="4000" type="card" height="500px">
    <el-carousel-item v-for="item in arrPhoto" :key="item">
      <img width="100%" height="100%" style="border-radius: 58px" :src="item ">
    </el-carousel-item>
  </el-carousel>
  </div>
</template>
<script>
import axios from'@/utils/axios'
  export default{
    data(){
      return{
        arrPhoto:[]

      }
    },
    methods:{
      // 查询所有轮播图信息
      findAllPhoto(){
        // 与后台交互的代码
        axios.get('/carousel/findAllCarousel').then((res)=>{
          console.log(res.data,'------')
          if(res.data.status==200){
            this.arrPhoto=res.data.data
          }else{
            this.$message({type:'error',message:res.data.message})
          }
        }).catch((error)=>{
          this.$message({type:'error',message:error})
        })

      }
    },

    created(){
      this.findAllPhoto()

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了s coped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .bottom{
    width: 1300px;
    height: 100px;
    background-color: white;
  }

</style>
